'use client'

import './demo.css';

import React, {
  useEffect,
  useState,
} from 'react';

import { CharacterManager } from '@/app/lib/character';
import { LAppPal } from '@/app/lib/live2d/lapppal';
import { LAppWavFileHandler } from '@/app/lib/live2d/lappwavfilehandler';
import { useShowStore } from '@/app/lib/store';

export default function Demo()  {
    const { show, setShow } = useShowStore();
    const [showElem, setshowElem] = useState(true);
    useEffect(()=>{
        const wavFileHandler = LAppWavFileHandler.getInstance();
        // 确保在客户端环境中初始化
        if (typeof window !== 'undefined') {
            wavFileHandler.initializeAudioContext();

        }
        const animate = () => {
    
            // 时间更新
            LAppPal.updateTime();
            const deltaTimeSeconds: number = LAppPal.getDeltaTime();
            if (!wavFileHandler.update(deltaTimeSeconds)) {
                // 只有在监听麦克风时才检查新的音频数据
                let talkData = CharacterManager.getInstance().popAudioQueue();
                if (talkData) {
                    wavFileHandler.start(talkData);
                  // 在 TTS 播放期间播放挥手动画
        
        
                }
                
        
            }
            requestAnimationFrame(animate);
        };
        
        // 在开始动画循环之前，初始化 LAppPal 的时间
        LAppPal.updateTime();
        // 启动动画循环
        requestAnimationFrame(animate);
    }, []);
    function  toggleFn () {
        setshowElem(false);
        setShow(true);
        console.log('After toggle:', useShowStore.getState().show); 
    }

    return (
            <div style={{width:'100%',height:'100%'}} className={showElem ? '':'hide'}>
                     <div className='fm_wrap'>
                     <div className="yhtitle imgdh" style={{opacity: 1, width: '616px'}}></div>
                     <div className="title_sub imgdh1" style={{opacity: 1}}></div>
                     <div className="ai" style={{opacity: 1, height: '674px'}}>
                         <div className="name" style={{opacity: 1}}></div>
                         <div onClick={toggleFn} className="btn_djdh" style={{opacity: 1}}></div>
                         <div className='per_l'></div>
                         <div className='per_r'></div>
                     </div>
                     </div>
            </div>
    )
    

  
}

